<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="common.css" />
	</head>

	<body>
		<div class="va-box box">
			<div class="vam item">

			</div>
		</div>
	</body>

</html>

<style type="text/css">
	div {
		border: 1px solid;
	}
	
	.va-box {
		/* 消除inline-block元素的间隙 */
		font-size: 0;
	}
	/* 相当于在va-box里面放了一个inline-block的元素,用以给后面的元素做参照 */
	
	.va-box:before {
		content: '';
		width: 0;
		display: inline-block;
		height: 100%;
		vertical-align: middle;
		visibility: hidden;
	}
	/* 垂直居中 */
	.vam {
		vertical-align: middle;
	}
	
	.box {
		width: 200px;
		height: 200px;
		text-align: center;
	}
	
	.item {
		height: 50px;
		width: 50px;
	}
</style>